<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
    <title>Responsive Horizontal-to-Vertical Menu &ndash; Layout Examples &ndash; Pure</title>
    <link rel="stylesheet" href="/css/pure/pure-min.css">
    <link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
</head>
<body>

<style>
.custom-wrapper {
    background-color: #ffd390;
    margin-bottom: 1em;
    -webkit-font-smoothing: antialiased;
    height: 2.1em;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
}

.custom-wrapper.open {
    height: 14em;
}

.custom-menu-3 {
    text-align: right;
}

.custom-toggle {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.custom-toggle .bar {
    background-color: #777;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    position: absolute;
    top: 18px;
    right: 7px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

.custom-toggle .bar:first-child {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}

.custom-toggle.x .bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media (max-width: 47.999em) {

    .custom-menu-3 {
        text-align: left;
    }

    .custom-toggle {
        display: block;
    }

}
</style>
<div class="custom-wrapper pure-g" id="menu">
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-menu">
            <a href="#" class="pure-menu-heading custom-brand">Brand</a>
            <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-menu pure-menu-horizontal custom-can-transform">
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
(function (window, document) {
var menu = document.getElementById('menu'),
    rollback,
    WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';

function toggleHorizontal() {
    menu.classList.remove('closing');
    [].forEach.call(
        document.getElementById('menu').querySelectorAll('.custom-can-transform'),
        function(el){
            el.classList.toggle('pure-menu-horizontal');
        }
    );
};

function toggleMenu() {
    // set timeout so that the panel has a chance to roll up
    // before the menu switches states
    if (menu.classList.contains('open')) {
        menu.classList.add('closing');
        rollBack = setTimeout(toggleHorizontal, 500);
    }
    else {
        if (menu.classList.contains('closing')) {
            clearTimeout(rollBack);
        } else {
            toggleHorizontal();
        }
    }
    menu.classList.toggle('open');
    document.getElementById('toggle').classList.toggle('x');
};

function closeMenu() {
    if (menu.classList.contains('open')) {
        toggleMenu();
    }
}

document.getElementById('toggle').addEventListener('click', function (e) {
    toggleMenu();
    e.preventDefault();
});

window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);

</script>
<style>
.main {
    padding: 2em;
    color: black;
}
</style>

<div class="main">

    <h1>Responsive Horizontal-to-Vertical Menu</h1>

    <p>This example shows how you can build upon Pure Menu and Grid classes. At wide
    window-widths we display a horizontal menu.
    At smaller window-widths,
    we switch to a vertical menu with a toggle control. Grids are used to
    arrange the menus.
    Code reproduced below:</p>

<pre class="code" data-language="html"><code>
      &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;/css/pure/grids-responsive-min.css&quot;&gt;

      &lt;style&gt;
      .custom-wrapper {
          background-color: #ffd390;
          margin-bottom: 1em;
          -webkit-font-smoothing: antialiased;
          height: 2.1em;
          overflow: hidden;
          -webkit-transition: height 0.5s;
          -moz-transition: height 0.5s;
          -ms-transition: height 0.5s;
          transition: height 0.5s;
      }

      .custom-wrapper.open {
          height: 14em;
      }

      .custom-menu-3 {
          text-align: right;
      }

      .custom-toggle {
          width: 34px;
          height: 34px;
          position: absolute;
          top: 0;
          right: 0;
          display: none;
      }

      .custom-toggle .bar {
          background-color: #777;
          display: block;
          width: 20px;
          height: 2px;
          border-radius: 100px;
          position: absolute;
          top: 18px;
          right: 7px;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
          -ms-transition: all 0.5s;
          transition: all 0.5s;
      }

      .custom-toggle .bar:first-child {
          -webkit-transform: translateY(-6px);
          -moz-transform: translateY(-6px);
          -ms-transform: translateY(-6px);
          transform: translateY(-6px);
      }

      .custom-toggle.x .bar {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
      }

      .custom-toggle.x .bar:first-child {
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
      }

      @media (max-width: 47.999em) {

          .custom-menu-3 {
              text-align: left;
          }

          .custom-toggle {
              display: block;
          }

      }
      &lt;/style&gt;
      &lt;div class&#x3D;&quot;custom-wrapper pure-g&quot; id&#x3D;&quot;menu&quot;&gt;
          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
              &lt;div class&#x3D;&quot;pure-menu&quot;&gt;
                  &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-heading custom-brand&quot;&gt;Brand&lt;/a&gt;
                  &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;custom-toggle&quot; id&#x3D;&quot;toggle&quot;&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
              &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-can-transform&quot;&gt;
                  &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;
                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
              &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform&quot;&gt;
                  &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;
                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Yahoo&lt;/a&gt;&lt;/li&gt;
                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;W3C&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
      (function (window, document) {
      var menu &#x3D; document.getElementById(&#x27;menu&#x27;),
          rollback,
          WINDOW_CHANGE_EVENT &#x3D; (&#x27;onorientationchange&#x27; in window) ? &#x27;orientationchange&#x27;:&#x27;resize&#x27;;

      function toggleHorizontal() {
          menu.classList.remove(&#x27;closing&#x27;);
          [].forEach.call(
              document.getElementById(&#x27;menu&#x27;).querySelectorAll(&#x27;.custom-can-transform&#x27;),
              function(el){
                  el.classList.toggle(&#x27;pure-menu-horizontal&#x27;);
              }
          );
      };

      function toggleMenu() {
          // set timeout so that the panel has a chance to roll up
          // before the menu switches states
          if (menu.classList.contains(&#x27;open&#x27;)) {
              menu.classList.add(&#x27;closing&#x27;);
              rollBack &#x3D; setTimeout(toggleHorizontal, 500);
          }
          else {
              if (menu.classList.contains(&#x27;closing&#x27;)) {
                  clearTimeout(rollBack);
              } else {
                  toggleHorizontal();
              }
          }
          menu.classList.toggle(&#x27;open&#x27;);
          document.getElementById(&#x27;toggle&#x27;).classList.toggle(&#x27;x&#x27;);
      };

      function closeMenu() {
          if (menu.classList.contains(&#x27;open&#x27;)) {
              toggleMenu();
          }
      }

      document.getElementById(&#x27;toggle&#x27;).addEventListener(&#x27;click&#x27;, function (e) {
          toggleMenu();
          e.preventDefault();
      });

      window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
      })(this, this.document);

      &lt;/script&gt;</code></pre>
</div>


</body>
</html>
